 <?php
  use yii\helpers\Html;
  use yii\helpers\Url;
  use yii\bootstrap\ActiveForm;
  use yii\widgets\LinkPager;

  $this->title = 'datalist';
 ?>
<style>
  ul,li{margin:0;padding:0;list-style: none;}
  .search_box{display:none;}
  .search_box .zhezhao{position:fixed;top:0;left:0;right:0;bottom:0;background:#000;opacity:0.6;}
  .search_box .search_form{position:absolute;top:10%;width:60%;background:#FFF;left:20%;}
  .search_box .search_form .form-group{margin-right: 0;margin-left:0;}
  .searchsex_box{overflow:hidden;}
  .searchsex_box>span{float:left;margin-top:10px;font-weight:700;}
  .searchsex_box .radio{float:left;margin-left:50px;}
  .search_form .box-footer{text-align:center;}
  .search_form .box-footer button{width:200px;}
  .font-info{margin-left:450px;}
</style>
<div class="box">
  <div class="box-header">
    <h3 class="box-title">客户列表</h3>
  </div>
  <!-- /.box-header -->
  <div class="box-body">
    <button type="button" class="btn btn-primary search_btn">搜索</button>
    <strong style="color:green;" class="font-info">
      <?php if(Yii::$app->session->hasFlash('success')){
          echo Yii::$app->session->getFlash('success');
      }?>
    </strong>
    <table id="example1" class="table table-bordered table-striped">
      <thead>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>电话</th>
        <th>生日</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <?php foreach ($model as $val) :?>
      <tr>
        <td><?= $val->username ?></td>
        <td><?= $val->sex == 'M' ? '男':'女'?></td>
        <td><?= $val->mobileNumber ?></td>
        <td><?= date('Y-m-d', $val->birthday) ?></td>
        <td class="<?= $val->id ?>_emp_handle">
            <a href="<?= Url::toRoute(['customer/create', 'id' => $val->id])?>"><button class="btn btn-info">修改客户信息</button></a>
            <a href="<?= Url::toRoute(['customer/intention', 'uid' => $val->id])?>"><button class="btn btn-success">新增意向产品</button></a>
            <a href="<?= Url::toRoute(['customer/view', 'uid' => $val->id])?>"><button class="btn btn-info">查看意向产品</button></a>
        </td>
      </tr>
      <?php endforeach;?>
      </tbody>
    </table>
  </div>

  <!-- /.box-body -->
  <?= LinkPager::widget(['pagination' => $pages]); ?>
</div>

<div class="search_box">
  <div class="zhezhao"></div>
  <div class="search_form">
    <?= Html::beginForm(Url::toRoute('customer/datalist'), 'get', ['id' => 'search-form', 'class'=>'form-horizontal']); ?>
      <div class="box-body">
        <div class="form-group">
          <label for="search_barcode">客户姓名</label>
          <?=Html::input('text','username','',['class' => 'form-control', 'id' => "search_barcode", 'placeholder' => "请输入客户姓名"]);?>
        </div>
        <div class="form-group searchsex_box">
          <span>性别</span>
          <div class="radio">
            <label><?=Html::radioList('sex', '', ['M'=>'男','F'=>'女'], ['class'=>'form-control']);?></label>
          </div>
        </div>
        <div class="form-group">
          <label for="search_phone">电话</label>
          <?=Html::input('text', 'mobileNumber', '', ['class' => 'form-control', 'id' => "search_phone", 'placeholder' => "请输入电话"]);?>
        </div>
        <div class="form-group">
          <label>生日</label>
          <div class="input-group">
            <div class="input-group-addon">
              <i class="fa fa-calendar"></i>
            </div>
            <?=Html::input('text','birthday', '', ['class' => 'form-control', 'id' => "reservation"]);?>
          </div>
        </div>
        <div class="form-group">
          <label>意向产品</label>
          <?=Html::dropDownList('pid', '', $product, ['class'=>'form-control', 'prompt' => '']);?>
        </div>
        </div>
      <div class="box-footer">
      <?= Html::submitButton('提交',['class'=>'btn btn-primary']);?>
      <input class="btn btn-warning btn-close" readonly value="关闭" style="width:200px" />
      </div>
    <?= Html::endForm(); ?>
  </div>
</div>

<script type="text/javascript" src="js/jquery.js"></script>
<!-- date-range-picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="plugins/daterangepicker/daterangepicker.js"></script>
<script>
    $(".search_btn").click(function(){
      $(".search_box").show();
    });
    $(".search_box .zhezhao").click(function(){
      $(this).parent(".search_box").hide();
    });
    $(".btn-close").click(function(){
      $(".search_box").hide();
    });
    $('#reservation').daterangepicker();
    //Date range picker with time picker
    $('#reservationtime').daterangepicker({timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A'});
    //Date range as a button
    $('#daterange-btn').daterangepicker(
        {
          ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
          }
        },
        function (start, end) {
          $('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        }
    );
</script>